<!--
- File:    app验证码登录.
-->
<template>
  <div class="">
    <!--<span @click="" class="close"><i class="iconfont icon-guanbi"></i></span>-->
    <div class="logo2"><img src="../../assets/images/lgoo.png"></div>
    <div class="login_cont">
      <div class="login_ipt">
        <input type="tel" placeholder="手机号码" v-model="mobile">
      </div>
      <div class="login_ipt2">
        <input type="tel" placeholder="验证码" v-model="code" style="color: #221814"><label>
        <span>
        <a href="javascript:void(0)">
          <message-code type="2" :tel="mobile" :sended-style="sendedStyle" :callback="handleMessageCode"></message-code>
        </a>
        </span>
      </label>
      </div>
      <div v-show="isNewMember">
        <div class="login_ipt">
          <input type="text" placeholder="姓名" v-model="name">
        </div>
        <div class="login_ipt">
          <input type="password" placeholder="设置6位数字密码" v-model="pwd">
        </div>
        <div class="login_ipt">
          <input type="password" placeholder="确认密码" v-model="pwdConfirm">
        </div>
      </div>
      <div class="login_btn">
        <button @click="login">验证码登录</button>
      </div>

      <div class="login_tit"><span class="title">其他登录方式</span></div>
      <div class="login_other">
        <ul class="clear">
          <li><a href="javascript:void(0)" @click="wxLogin"><i class="iconfont icon-iconfontweixin2"></i><span>微信登录</span></a></li>
          <li><a href="javascript:void(0)" @click="gotoLoginPwd"><i class="iconfont icon-mima"></i><span>密码登录</span></a></li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  import messageCode from '../../components/message-code.vue'
  import {mapModules} from 'vuet'

  export default{
    mixins: [
      mapModules({wxInfo: 'wxInfo'})
    ],
    beforeRouteEnter (to, from, next) {
      if (!document.body.classList.contains('login_bg')) {
        document.body.classList.add('login_bg')
      }
      next()
    },
    beforeRouteLeave  (to, from, next) {
      if (to.name != 'login-password' && to.name != 'login-bind') {
        document.body.classList.remove('login_bg')
      }
      next()
    },
    components: {
      'message-code': messageCode
    },
    data() {
      return {
        mobile: '',
        code: '',
        name: '',
        pwd: '',
        pwdConfirm: '',
        sendedStyle: {color: '#595757'},
        isNewMember: false // 是否新用户
      }
    },
    methods: {
      gotoLoginPwd() {
        this.$router.replace({name: 'login-password'})
      },
      login() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.code == '') {
          this.$toast('请输入验证码')
          return
        }
        if (this.isNewMember) {
          if (!this.name) {
            this.$toast('请输入姓名')
            return
          }
          if (!this.$validator.pwd(this.pwd)) {
            this.$toast('请设置6位数字密码')
            return
          }
          if (!this.pwdConfirm) {
            this.$toast('请输入确认密码')
            return
          }
          if (this.pwd != this.pwdConfirm) {
            this.$toast('两次输入的密码不一致')
            return
          }
        }
        this.$request.loginByMessage(this.mobile, this.code, this.name, this.pwd).then(data => {
          this.$storage.setKey(data.key) // 测试用
          this.$router.replace({name: 'home'})
        }).catch(e => {
          this.$toast('登录失败:' + e.msg)
        })
      },
      wxLogin() {
        this.$native.weixinLogin().then(wxInfo => {
          console.log('微信登录成功', wxInfo)
          this.wxInfo = wxInfo
          this.$request.getKeyByUnionId(wxInfo.unionid).then(data => {
            console.log('根据unionid获取用户信息', data)
            if (data.key) {
              this.$storage.setKey(data.key)
              this.$router.replace({name: 'home'})
            } else {
              this.$router.replace({name: 'login-bind'})
            }
          })
        }).catch(e => {
          this.$toast('微信登录失败:' + e.msg)
        })
      },
      handleMessageCode(code) {
        if (code.mp == '0') {
          this.isNewMember = true
        } else {
          this.isNewMember = false
        }
      }
    }
  }
</script>

<style>

</style>